<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <!-- <link rel="stylesheet" href="./css/bootstrap.css"> -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>软件18.4-姜佳鑫-40</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <!-- 懒加载 -->
    <script>
      (function($) { 
       // alert($.fn.scrollLoading); 
       $.fn.scrollLoading = function(options) { 
         var defaults = { 
           attr: "data-url"
         }; 
         var params = $.extend({}, defaults, options || {}); 
         params.cache = []; 
         $(this).each(function() { 
           var node = this.nodeName.toLowerCase(), 
             url = $(this).attr(params["attr"]); 
           if(!url) { 
             return; 
           } 
           var data = { 
             obj: $(this), 
             tag: node, 
             url: url 
           }; 
           params.cache.push(data); 
         }); 
 
         var loading = function() { 
           var st = $(window).scrollTop(), 
             sth = st + $(window).height(); 
           $.each(params.cache, function(i, data) { 
             var o = data.obj, 
               tag = data.tag, 
               url = data.url; 
             if(o) { 
               post = o.position().top; 
               posb = post + o.height(); 
               if((post > st && post < sth) || (posb > st && posb < sth)) { 
                 if(tag === "img") { 
                   o.attr("src", url); 
                 } else { 
                   o.load(url); 
                 } 
                 data.obj = null; 
               } 
             } 
           }); 
           return false; 
         }; 
 
         loading(); 
         $(window).bind("scroll", loading); 
       }; 
     })(jQuery);
    </script>

</head>
<body>
    
  <header id="header" >
    <div class="logo l">
        <div class="logo_box" style="background:url(./img/logo.jpg);">
        <!-- <img src="../img/logo.jpg" alt="仿一加官网（软件18.4姜佳鑫）"" title="仿一加官网（软件18.4姜佳鑫）"> --></div>
    </div>
    <div class="menu ">
        <div class="menu_box">
       <ul id="nav-pages" class="nav-pages"style="overflow: hidden;">
           <li class="page">
               <a href="https://www.oneplus.com/cn/8t?from=head">
                   <span>8系列</span>
                   <span class="iconfont icon-new1" id="captain"></span>
               </a> 
               <div class="nav_box_t">
                 <div class="eight">
                   <div class="pro"><a href="https://www.oneplus.com/cn/8t-cyberpunk2077">
                     <div class="pic">
                       <img src="./img/good1.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                     </div>
                     <div class="des">
                       <p>OnePlus 8Pro 黑镜</p>
                     </div>
                   </a></div>
                   <div class="pro"><a href="https://www.oneplus.com/cn/8-pro?from=head">
                    <div class="pic">
                      <img src="./img/good2.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                    </div>
                    <div class="des">
                      <p>OnePlus 8Pro 青空</p>
                    </div>
                  </a></div>
                  <div class="pro"><a href="https://www.oneplus.com/cn/8t?from=head">
                    <div class="pic">
                      <img src="./img/good3.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                    </div>
                    <div class="des">
                      <p>OnePlus 8 银翼</p>
                    </div>
                  </a></div>
                  <div class="pro"><a href="https://www.oneplus.com/cn/8?from=head">
                    <div class="pic">
                      <img src="./img/good4.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                    </div>
                    <div class="des">
                      <p>OnePlus 8 梦幻</p>
                    </div>
                  </a></div>
                 </div>
               </div>
           </li>
           <li class="page">
               <a href="./router/shoppingcar.html">
                   <span>商城</span>
               </a>
           </li>
           <li class="page">
            <a href="https://www.oneplus.com/cn/brand?from=head">
                <span>品牌</span>
            </a>
           </li>
           <li class="page">
            <a href="https://www.oneplus.com/cn/support?from=head">
                <span>服务</span>
            </a>
           </li>
           <li class="page">
            <a href="http://www.oneplusbbs.com/?from=head">
                <span>论坛</span>
            </a>
           </li>
           <li class="page">
            <a href="https://www.oneplus.com/cn/retail?from=head">
                <span>零售店</span>
            </a>
           </li>
       </ul>
          </div>
    </div>
    <div class="login">
        <ul>
            <li style="width:150px;text-align: center;"><a href="">
            <span><i class="iconfont icon-icon-test" style="font-size:22px"></i></span>
            
        </a>
        
        <div class="cart_box_t" >
         <div>
           <div class="cart_des">
             <p>还差￥99.00元免邮</p>
           </div>
           <div class="go_shop">
             <span>你的购物车空空如也</span>
           </div>
           <div style="width: 280px;height: 35px;margin: 5px auto;">
             <a href="./router/shoppingcar.html" class="layui-btn layui-btn-fluid layui-btn-danger" ><p style="text-align: center;">去购物</p></a>
           </div>
           
         </div>
        </div></li>
        <li>
           <a href="">
            <span><i class="iconfont icon-icon-test1" style="font-size:22px"></i></span>
           
        </a>  <div class="login_box_t ">
          <div style="width: 280px;height: auto;margin: 10px auto;">
             <div class="login_list"><a href="">订单</a></div>
          <div class="login_list"><a href="">账单</a></div>
          <div class="login_list"><a href="">推荐有礼</a></div>
          <a href="./router/login.html" class="layui-btn layui-btn-sm layui-btn-danger" style="margin-top: 10px;float: right;">去登录</a>
        </li>
    </ul>
    </div>
</header>
    <article id="product">
        <div class="product1 " >
            <img src="./img/product1.jpg" alt="" style="z-index: 1;">
            <div style="width: 425px;height: auto;margin-top: -450px;margin-left: 300px;
            position: absolute; 
            z-index: 100;">
            <div style="width: 425px;height: 40.8px;"><label style="font-size: 34px;line-height: 40.8px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">OnePlus 8T</label></div>
            <div style="width: 425px;height: 26.4px;margin-top: 6px;"><p style="font-size: 18px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">120Hz 柔性直屏 | 65W 超级闪充 | 骁龙 865</p></div>
            <div style="width: 425px;height: 20px;"></div>
            <div style="width: 425px;height: 29.6px;"><span style="font-size: 20px;line-height: 29.6px;font-family:  MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">￥3,399起</span></div>
            <div style="width: 425px;height: 10px;"></div>
            <div style="width: 425px;height: 50px;"><a href="./router/shoppingcar.html" class="layui-btn layui-btn-primary" style="width: 108px;height: 40px;line-height: 38px;text-align: center;border: 2px solid rgb(46, 46, 46);border-radius: 3px;background-color:transparent">立即购买</a></div>
            <div style="width: 425px;height: 24px;"><a href="https://www.oneplus.com/cn/8t"><span style="font-size: 16px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">了解产品 ></span></a></div>
            </div>
        </div>
        <div class="product2">
            <img  class="scrollLoading" data-url="./img/product2.jpg" src="./img/logo.jpg">
            <div style="width: 425px;height: auto;margin-top: -450px;margin-left: 300px;
            position: absolute; 
            z-index: 100;">
            <div style="width: 425px;height: 40.8px;"><label style="font-size: 34px;line-height: 40.8px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">OnePlus 8</label></div>
            <div style="width: 425px;height: 26.4px;margin-top: 6px;"><p style="font-size: 18px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">最高直降600元</p></div>
            <div style="width: 425px;height: 20px;"></div>
            <div style="width: 425px;height: 29.6px;"><span style="font-size: 20px;line-height: 29.6px;font-family:  MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">￥3,599起</span></div>
            <div style="width: 425px;height: 10px;"></div>
            <div style="width: 425px;height: 50px;"><a href="./router/shoppingcar.html" class="layui-btn layui-btn-primary" style="width: 108px;height: 40px;line-height: 38px;text-align: center;border: 2px solid rgb(46, 46, 46);border-radius: 3px;background-color:transparent">立即购买</a></div>
            <div style="width: 425px;height: 24px;"><a href="https://www.oneplus.com/cn/8?from=head"><span style="font-size: 16px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">了解产品 ></span></a></div>
            </div>
        </div>
        <div class="product3">
            <img  class="scrollLoading" data-url="./img/product3.jpg" src="./img/logo.jpg">
            <div style="width: 425px;height: auto;margin-top: -450px;margin-left: 550px;text-align: center;
            position: absolute; 
            z-index: 100;">
            <div style="width: 425px;height: 40.8px;"><label style="font-size: 34px;line-height: 40.8px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">OnePlus 8Pro</label></div>
            <div style="width: 425px;height: 26.4px;margin-top: 6px;"><p style="font-size: 18px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">最高直降600元</p></div>
            <div style="width: 425px;height: 20px;"></div>
            <div style="width: 425px;height: 29.6px;"><span style="font-size: 20px;line-height: 29.6px;font-family:  MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">￥4,799起</span></div>
            <div style="width: 425px;height: 10px;"></div>
            <div style="width: 425px;height: 50px;"><a href="./router/shoppingcar.html" class="layui-btn layui-btn-primary" style="width: 108px;height: 40px;line-height: 38px;text-align: center;border: 2px solid rgb(46, 46, 46);border-radius: 3px;background-color:transparent">立即购买</a></div>
            <div style="width: 425px;height: 24px;"><a href="https://www.oneplus.com/cn/8-pro?from=head"><span style="font-size: 16px;font-family: MYingHei W5,Roman-55,Microsoft Yahei,sans-serif;">了解产品 ></span></a></div>
            </div>
        </div>
        <article id="gonggaolan">
           
              <div class="layui-row ">
                <div class="layui-col-md6">
                  <a href="https://www.oneplus.com/cn/brand">
                    <div class="gonggao1">
                      <img  class="scrollLoading" data-url="./img/gonggao1.png" src="./img/logo.jpg">
                  </div>
                  </a>
                </div>
                <div class="layui-col-md6">
                  <a href="https://www.oneplus.com/cn/retail?from=block">
                    <div class="gonggao1">
                      <img  class="scrollLoading" data-url="./img/gonggao2.jpg" src="./img/logo.jpg">
                  </div>
                  </a>
                </div>
                <div class="layui-col-md6">
                  <a href="https://www.oneplus.com/cn/bulletin">
                    <div class="gonggao1">
                      <img  class="scrollLoading" data-url="./img/gonggao3.jpg" src="./img/logo.jpg">
                  </div>
                  </a>
                </div>
                <div class="layui-col-md6">
                  <a href="./router/shoppingcar.html">
                    <div class="gonggao1">
                      <img  class="scrollLoading" data-url="./img/gonggao4.jpg" src="./img/logo.jpg">
                  </div>
                  </a>
                </div>
              </div>
        </article>
    </article>
    
    <div id="guanggao">
    <video
    id="video"
    controls
    autoplay
    loop
    preload="auto"
    poster="img/popup-img.png"
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type="h5"
    x5-video-player-fullscreen="true"
    x-webkit-airplay="allow" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
        <source src="./img/video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg; codecs=dirac, speex">
        <p>你的浏览器不支持 <code>video</code> 标签.</p>
</video>
<article id="service">
      <img src="./img/contall.png" alt="" >
    </article>
</div>
    <footer id="footer" style="border-top:1px solid whitesmoke;">
      <div class="footer-list">
      <ul class="footer-list-ul">
        <p>一加产品</p>
        <li>
          <a href="">OnePlus 8T</a>
        </li>
        <li>
          <a href="">
            OnePlus 8Pro
          </a>
        </li>
        <li><a href="">
          OnePlus 8
        </a></li>
        <li>
          <a href="">
            OnePlus 7T
          </a>
        </li>
        
      </ul>
      <ul class="footer-list-ul">
        <p>配件</p>
        <li>
          <a href="">耳机</a>
        </li>
        <li>
          <a href="">
            壳/膜
          </a>
        </li>
        <li><a href="">
         数据线
        </a></li>
        <li>
          <a href="">
           套装
          </a>
        </li>
        
      </ul>
      <ul class="footer-list-ul">
        <p>关于一加</p>
        <li>
          <a href="">了解一加</a>
        </li>
        <li>
          <a href="">
            加入一加
          </a>
        </li>
        <li><a href="">
          可持续发展
        </a></li>
        <li>
          <a href="">
           云服务
          </a>
        </li>
        <li>
          <a href="">
           预设应用公示
          </a>
        </li>
        
      </ul>
      <ul class="footer-list-ul">
        <p>服务支持</p>
        <li>
          <a href="">购买帮助</a>
        </li>
        <li>
          <a href="">
           购买保险
          </a>
        </li>
        <li><a href="">
          购买手册
        </a></li>
        <li>
          <a href="">
           寄修服务
          </a>
        </li>
        <li>
          <a href="">
           联系我们
          </a>
        </li>
      </ul></div>
      <div class="footer-nav">
      <p class="footer_nav_p l">粤ICP备13080605号 | 备案主体编号: 44201910955995
        </p>
        <div class="footer_nav_list r">
          <a href="#">隐私政策</a> |  <a href="#">用户协议</a>  |  <a href="#">知识产权政策</a>  |  <a href="#">站点地图</a>
      </div></div>
    </footer>  
</body>
<script>
    $(document).ready(function () { 
   //实现图片慢慢浮现出来的效果 
   $("img").load(function () { 
     //图片默认隐藏  
     $(this).hide(); 
     //使用fadeIn特效  
     $(this).fadeIn("550000"); 
   }); 
   // 异步加载图片，实现逐屏加载图片 
   $(".scrollLoading").scrollLoading();  
 });
</script>
<script src="./layui/layui.js"></script>
<script>
  //一般直接写在一个js文件中
  layui.use(['layer', 'form'], function(){
    var layer = layui.layer
    ,form = layui.form;
  });
  </script> 
</html>